'use client' // 布局系统的组件必须声明为'客户端组件'
import { adminInfo, adminUpdatePwd } from '@/service'
import { BankOutlined, BarsOutlined, CaretDownOutlined, ExclamationCircleOutlined, FundProjectionScreenOutlined, HighlightOutlined, HomeOutlined, MedicineBoxOutlined, MenuFoldOutlined, MenuUnfoldOutlined, PoweroffOutlined, QuestionCircleOutlined, SettingOutlined, UserOutlined, WifiOutlined, createFromIconfontCN } from '@ant-design/icons'
import { Button, Divider, Dropdown, Form, Input, Layout, Menu, Modal, Popover, Space, Typography, message } from 'antd'
import Link from 'next/link'
import { useRouter } from 'next/navigation'
import React, { useEffect, useRef, useState } from 'react'
// 从iconfont.cn中创建新的图标库
const ZhIcon = createFromIconfontCN({
  scriptUrl: '//at.alicdn.com/t/c/font_4225347_pti78uker4f.js'   // 提供图标库的路径（生成的路径）
})
// 创建对象，保存图标，通过结果返回的icon找对应图标
const menuIcon = {
  home: <HomeOutlined />,
  building: <ZhIcon type='icon-jianzhu' />, // 使用自定义图标库
  medical: <MedicineBoxOutlined />,
  category: <WifiOutlined />,
  chart: <FundProjectionScreenOutlined />,
  basic: <ZhIcon type='icon-jibenxinxi1' />,
  layers: <SettingOutlined />
}


export default function layout({ children }) {
  // 状态变量，保存侧边栏的收起状态
  const [siderCollapse,setSiderCollapse] = useState(false)
  // 状态变量，保存一组主题色
  const [skin, setSkin] = useState(['#957BFF','#FAAD14','#1677FF','#FF4D4F','#FF603B'])
  // 状态变量，保存当前的主题色
  const [themeColor,setThemeColor] = useState('#957BFF')
  // 创建路由对象
  const router = useRouter()
  // 状态变量，保存模态框打开状态
  const [open,setOpen] = useState(false)
  // 创建引用
  const formRef = useRef()
  // 状态变量，保存管理员用户名
  const [admin,setAdmin] = useState('')
  // 状态变量，保存权限菜单
  const [list, setList] = useState([])

  // 将用户的权限  映射为 导航菜单
  // 不确定数组（菜单权限）的层级，必须使用递归
  // privileges 接口返回的菜单
  const menuMap = (privileges) => {
    // 如果递归执行到最后，没有子菜单或者没有获取到权限列表，结束返回null
    if(!privileges || privileges.length === 0) {
      return null
    }
    // 递归，循环数组
    return privileges.map((item) => {
      return {
        key: item.path,
        label: item.pname,
        icon: menuIcon[item.icon],
        // 如果还有子菜单，继续递归
        children: menuMap(item.children)
      }
    })
  }
  console.log(menuMap(list))

  // 菜单内容
  /*
  const menu = [
    {
      key: '1',
      icon: <HomeOutlined />,
      label: '首页'
    },
    {
      key: '2',
      icon: <BankOutlined />,
      label: '智慧物业',
      children: [
        {key: '2-1', label: '物业缴费'},
        {key: '2-2', label: '缴费查询'},
        {key: '2-3', label: '故障报修'},
        {key: '2-4', label: '公告管理'},
      ]
    }
  ]
  */
  // 页面挂载后，请求接口获取管理员信息和菜单权限
  useEffect(() => {
    ;(async () => {
      const data = await adminInfo()
      // 如果接口返回的数据中没有aname说明未登录
      if(!data.aname) {
        message.error('还没有登录，请登录！',3)
        router.replace('/')
      } else {
        setAdmin(data.aname)  // 保存用户名
        setList(data.privileges)  // 保存权限菜单
        console.log(data)
      }
    })()
  },[])

  return (  
    <>
      {/* 使用ant-design的布局系统 */}
      <Layout>
        {/* 左侧功能菜单 */}
        <Layout.Sider
          // 侧边栏是否可收起
          collapsible
          // 是否收起
          collapsed={siderCollapse}
          // null 使用自定义触发器
          trigger={null}
          style={{
            backgroundColor: themeColor,
            color: '#FFF',
            padding: 5,
            height: '100vh'
          }}
        >
          <Menu 
            // 模式
            // inline 子菜单出现在父菜单的下边
            // vertical  子菜单出现在父菜单的右边一列展示 
            // horizontal  菜单一行展示
            mode='inline'
            // 菜单内容
            items={menuMap(list)}
            // 点击菜单项，获取菜单项key，跳转指定位置
            onClick={({key}) => router.push(key)}
          />
        </Layout.Sider>
        {/* 右侧：顶部导航 + 主体页面 */}
        <Layout style={{marginLeft: 5}}>
          {/* 顶部导航 */}
          <Layout.Header
            style={{
              backgroundColor: themeColor,
              color: '#FFF',
              paddingLeft: 0,
              display: 'flex',
              alignItems: 'center'
            }}
          >
            <Button 
              type='text'
              icon={siderCollapse ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
              // 点击切换折叠状态
              onClick={() => setSiderCollapse(!siderCollapse)}
              style={{
                width: 64,
                height: 64,
                color: '#FFF'
              }}
            />
            <div style={{display: 'flex',alignItems: 'center', flex: 1}}>
              <Typography.Title 
                level={3} 
                style={{marginBottom: 0, color: '#FFF'}}
              >
                天通苑智慧社区后台管理系统
              </Typography.Title>
            </div>
            {/* 右侧功能按钮  */}
            <div>
              <UserOutlined style={{fontSize: 20}} />
              <Dropdown menu={{items: [
                {
                  key: '1', 
                  label: <a href='#' onClick={(e) => {
                    // 阻止默认操作
                    e.preventDefault()
                    setOpen(true)
                  }}>修改密码</a>
                },
                {key: '2', label: <a href='#'>个人资料</a>},
              ]}}>
                <Button type='text' style={{color: '#FFF', paddingLeft: 5}}>
                  {admin}<CaretDownOutlined style={{marginLeft: 2}} />
                </Button>
              </Dropdown>
              <HighlightOutlined style={{fontSize: 20}} />
              <Popover content={(
                <Space style={{display: 'flex'}}>
                  {skin.map((item,index) => (
                    <div 
                      key={index} 
                      style={{
                        width: 60, 
                        height: 40, 
                        backgroundColor: item
                      }}
                      // 点击改变主题色
                      onClick={() => setThemeColor(item)}
                    />
                  ))}
                </Space>
              )}>
                <Button type='text' style={{color: '#FFF', paddingLeft: 5}}>换肤</Button>
              </Popover>
              <QuestionCircleOutlined style={{fontSize: 20}} />
              <Button type='text' style={{color: '#FFF', paddingLeft: 5}}>
                帮助<CaretDownOutlined style={{marginLeft: 2}} />
              </Button>
              <PoweroffOutlined 
                style={{fontSize: 20}}
                onClick={() => Modal.confirm({
                  title: '系统提示',
                  icon: <ExclamationCircleOutlined />,
                  content: '确定要退出系统吗？',
                  cancelText: '取消',
                  okText: '确定',
                  onOk: () => {
                    // 移出token
                    localStorage.removeItem('userToken')
                    // 跳转到登录页
                    router.replace('/')
                  }
                })}
              />
            </div>
          </Layout.Header>
          {/* 主体页面 */}
          <Layout.Content style={{padding: 20}}>
            {children}
          </Layout.Content>
        </Layout>
      </Layout>
      {/* open 打开状态 */}
      <Modal 
        destroyOnClose  // 关闭模态框时，销毁子元素
        title='修改密码' 
        open={open}
        cancelText='取消'
        okText='确定'
        onCancel={() => setOpen(false)}
        onOk={() => {
          // 访问到表单，触发表单提交
          // console.log(formRef.current)
          formRef.current.submit()
        }}
      >
        <Form 
          ref={formRef}
          labelCol={{span: 4}}
          wrapperCol={{span: 20}}
          onFinish={async (values) => {
            console.log(values)
            // 两次输入的新密码必须相同
            if(values.newPwd !== values.confirmPwd) {
              return message.error('两次输入密码必须相同！',3)
            }
            // 发请求
            const data = await adminUpdatePwd(values.oldPwd,values.newPwd)
            console.log(data)
            // 判断是否修改成功
            if(data.code === 2000) {
              message.success('密码修改成功')
              // 关闭模态框
              // setOpen(false)
              // 跳转到登录页
              router.replace('/')
            } else {
              message.error('修改失败')
            }
          }}
        >
          <Divider />
          <Form.Item label='旧密码' name='oldPwd' rules={[
            {required: true, message: '旧密码不能为空'}
          ]}>
            <Input.Password placeholder='请输入旧密码' />
          </Form.Item>
          <Form.Item label='新密码' name='newPwd' rules={[
            {required: true, message: '新密码不能为空'}
          ]}>
            <Input.Password placeholder='请输入新密码' />  
          </Form.Item>
          <Form.Item label='确认密码' name='confirmPwd' rules={[
            {required: true, message: '确认密码不能为空'}
          ]}>
            <Input.Password placeholder='请再次输入' />  
          </Form.Item>
          <Divider />
        </Form>     
      </Modal>
    </>
  )
}
